import'./style.scss'
import React from 'react';
import 'antd/dist/antd.css';
import { Button,  Form, Input } from 'antd';
import { Component } from 'react';
import{LoginAdmin} from '../../api/admin'
import { connect } from 'react-redux';
import withRouter from '../../util/withRouter'
import {setAdminInfo}  from  '../../store/adminSlice'


class Login extends Component{
     
    state={ 
        name:'',
        pwd:'',
    }

  handelelogin =async()=>{
    
     let res=  await  LoginAdmin({
        name:this.state.name,
        pwd:this.state.pwd
     })
    
     console.log('res',res)
     console.log(this.props,111)
     this.props.dispatch(setAdminInfo(res.data))
    //  console.log('res',res)
     
    this.props.navigate('/index',{replace:true})

  }
    
      render()  {

        return(
            <div className='big'>
                 <div className='box'>      
                    <Form
                        name="basic"
                        labelCol={{
                        span: 8,
                    }}
                    wrapperCol={{
                         span: 10,
                    }}
                    initialValues={{
                         remember: true,
                    }}
 
                    autoComplete="off"
                >
                    <Form.Item
                        label="Username1"
                        name="username"
                    rules={[
                        {
                        required: true,
                        message: 'Please input your username!',
                        },
                    ]}
                    >
                    <Input value={this.state.name}  onChange={ev=>this.setState({name:ev.target.value})}/>
                    </Form.Item>
            
                    <Form.Item
                        label="Password"
                        name="password"
                    
                    rules={[
                        {
                        required: true,
                        message: 'Please input your password!',
                        },
                    ]}
                    >
                    <Input.Password value={this.state.pwd}  onChange={ev=>this.setState({pwd:ev.target.value})}/>
                    </Form.Item>
            
                    <Form.Item
                        wrapperCol={{
                            offset: 8,
                            span: 16,
                    }}
                    >
                    <Button 
                        type="primary" 
                        htmlType="submit"
                        onClick={this.handelelogin}
                    >
                        Submit
                    </Button>
                    </Form.Item>
                </Form>
              </div>
            </div>
        );
      }
   
    
 }
   
   const mapStateTopProps=(state)=>({...state})
  
export default  connect(mapStateTopProps) (withRouter (Login)) ;